<template>
    <div class="widget-radio" :class="{ selected: isSelected }" @click.stop="changeRadioSelect">
        <span class="radio-dot"></span>
    </div>
</template>

<script>
export default {
    name: 'WidgetRadio',
    props: {
        isSelected: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            
        };
    },
    methods: {
        changeRadioSelect() {
            this.$emit('update:is-selected', !this.isSelected)
            this.$emit('change', !this.isSelected)
        }
    },
};
</script>

<style lang="scss" scoped>
.widget-radio {
    width: 20px;
    height: 20px;
    border: 1px solid #d8d8d8;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
   
    .radio-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: transparent;
        transition: all 0.3s ease;
    }
    &:hover {
        border: 1px solid $--color-danger;
    }
    &.selected {
        border: 1px solid $--color-danger;
        .radio-dot {
            background: $--color-danger;
        }
    }
}
</style>